<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>currencyRate</title>

    <style>
        div{
            margin: 5px auto;
            /*margin-left: 100px;*/
            align-self: center;
            width: 500px;
        }
        table{
            width: 500px;
            border: 1px black solid;
            padding: 1px;
        }
        th,td{
            height: 35px;
            text-align: center;
            border: 1px black solid;
        }
        #headtext{
            background: #ef4238;
        }
    </style>
</head>
<body>
<div>
    <select name="" id="moneyLeft" onchange="setMoneyRight()">
    </select>
    <input type="submit" value="互换" onclick="exchangeRate()">
    <select name="" id="moneyRight" onchange="setMoneyLeft()">
    </select>
    数额:
    <input type="text" placeholder="100" value="100" id="userInputMoney">
    <input type="submit" value="汇率转换" onclick="calMoney()">
</div>
<div>
    <table>
        <tr id="headtext">
            <th colspan="3">按当前汇率兑换结果</th>
        </tr>
        <tr id="tableLine1"><td></td><td></td><td></td>
        </tr>
        <tr id="tableLine2"><td></td><td></td><td></td>
        </tr>

    </table>
</div>

<script>

    // 货币名称
    var listMoney = ['美元', '欧元', '日元', '港元', '韩元', '比特币'];
    // 汇率（以美元为基准）
    var listRate = [1, 0.9, 100, 8, 1000, 0.000016];


    // 初始化左右货币列表
    function init() {
        setMoneyLeft();
        setMoneyRight();
        calMoney();
    }
    init();


    // 设置标签位，判断用户是否操作了左边
    var changeLeft = true;

    // 左边列表设置，保证与右边不相同
    function setMoneyLeft() {
        changeLeft = false;
        // 获取右侧列表value
        var moneyRightValue = document.getElementById('moneyRight').value;
        // 设置左侧列表
        var moneyLeftSelects = document.getElementById('moneyLeft');
        // 获取左边原始value
        var valueOrigin = moneyLeftSelects.value;
        // 先清空列表
        moneyLeftSelects.innerText = '';
        for (var i = 0; i < listMoney.length; i++) {
            if (i==moneyRightValue) continue;
            var moneyOption = document.createElement('option');
            moneyOption.value = i;
            moneyOption.innerText = listMoney[i];
            moneyLeftSelects.appendChild(moneyOption);
        }
        // 恢复为原始value
        if (valueOrigin!=''&&valueOrigin!=moneyRightValue)
            moneyLeftSelects.value = valueOrigin;
    }

    // 右边选择列表设置，保证与左边不相同
    function setMoneyRight() {
        changeLeft = true;
        // 获取左侧列表value
        var moneyLeftValue = document.getElementById('moneyLeft').value;
        // 设置右侧列表
        var moneyRightSelects = document.getElementById('moneyRight');
        // 获取右边原始value
        var valueOrigin = moneyRightSelects.value;
        // 先清空列表
        moneyRightSelects.innerText = '';
        for (var i = 0; i < listMoney.length; i++) {
            if (i==moneyLeftValue) continue;
            var moneyOption = document.createElement('option');
            moneyOption.value = i;
            moneyOption.innerText = listMoney[i];
            moneyRightSelects.appendChild(moneyOption);
        }
        // 恢复为原始value
        if (valueOrigin!=''&&valueOrigin!=moneyLeftValue)
            moneyRightSelects.value = valueOrigin;
    }

    // 左右列表值互换
    function exchangeRate() {
        var moneyLeftSelects = document.getElementById('moneyLeft');
        var moneyRightSelects = document.getElementById('moneyRight');
        var left = moneyLeftSelects.value;
        var right = moneyRightSelects.value;
        // 互还value，同时保证左右列表不会出现相同元素
        moneyRightSelects.value = '';
        setMoneyLeft();
        moneyLeftSelects.value = right;
        setMoneyRight();
        moneyRightSelects.value = left;
        setMoneyLeft();
    }

    // 计算汇率
    function calMoney() {
        // 获取td
        var line1tds = document.getElementById('tableLine1').childNodes;
        var line2tds = document.getElementById('tableLine2').childNodes;
        // 获取用户输入值
        var userInput = document.getElementById('userInputMoney');
        if (userInput.value == '') userInput.value = 100;
        // 获取 index下标
        var indexLeft = document.getElementById('moneyLeft').value;
        var indexRight = document.getElementById('moneyRight').value;
        // 第一列
        line1tds[0].innerText = listMoney[indexLeft];
        line2tds[0].innerText = userInput.value;
        // 第二列
        line1tds[1].innerText = '汇率';
        var rateRelative = listRate[indexRight] / listRate[indexLeft];
        line2tds[1].innerText = rateRelative.toFixed(10);
        // 第三列
        line1tds[2].innerText = listMoney[indexRight];
        var moneyCal = userInput.value * rateRelative;
        line2tds[2].innerText = moneyCal.toFixed(10);
        // 清空用户输入
        userInput.value = '';
    }
</script>
</body>
</html>